<template>
  <div class="content">
    <div class="linetop">
      <div class="topright"></div>
      <el-button type="primary" @click.native="toadd">
        <i class="el-icon-plus"></i>新建方案
      </el-button>
    </div>
    <div class="seachsee">
      <div class="itemones">
        <div class="itemname">创建日期</div>
        <!-- <el-date-picker
      v-model="value1"
      style="width:300px;"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
        </el-date-picker>-->
        <el-date-picker
          v-model="start_time"
          type="date"
          style="width:140px;"
          placeholder="开始时间"
          format="yyyy 年 MM 月 dd 日"
          value-format="timestamp"
        ></el-date-picker>
        <span style="padding:0 5px;">~</span>
        <el-date-picker
          v-model="end_time"
          type="date"
          style="width:140px;"
          placeholder="结束时间"
          format="yyyy 年 MM 月 dd 日"
          value-format="timestamp"
        ></el-date-picker>
      </div>
      <div class="itemones">
        <div class="itemname">有效日期</div>
        <el-date-picker
          v-model="effective_start"
          type="date"
          style="width:140px;"
          placeholder="开始时间"
          format="yyyy 年 MM 月 dd 日"
          value-format="timestamp"
        ></el-date-picker>
        <span style="padding:0 5px;">~</span>
        <el-date-picker
          v-model="effective_end"
          type="date"
          style="width:140px;"
          placeholder="结束时间"
          format="yyyy 年 MM 月 dd 日"
          value-format="timestamp"
        ></el-date-picker>
      </div>
      <div class="itemones">
        <div class="itemname">方案名称</div>
        <el-input v-model="name" style="width:300px;"></el-input>
      </div>
      <div class="itemones">
        <div class="itemname">包含资源</div>
        <el-input v-model="resources_name" style="width:300px;"></el-input>
      </div>
      <div class="itemones">
        <div class="itemname">状态</div>
        <el-select v-model="status" style="width:300px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="itemones">
        <div class="itemname">适用范围</div>
        <el-cascader :options="doorlist" v-model="use" :props="props" clearable></el-cascader>
      </div>
      <div class="itemones">
        <el-button
          type="primary"
          style="margin-left:20px;"
          @click.native="seachList"
          icon="el-icon-search"
        >搜索</el-button>
      </div>
    </div>
    <div class="ulist">
      <el-table
        :data="tableData"
        border
        :cell-style="$rowstyle"
        :header-cell-style="$headerstyle"
        style="width: 100%"
      >
        <el-table-column prop="code" label="方案编号" align="center" width="100"></el-table-column>
        <el-table-column prop="name" align="center" label="方案名称" width="120"></el-table-column>
        <el-table-column prop="province" align="center" label="有效日期" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.effective_start}}~{{scope.row.effective_end}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="place" label="适用场景" align="center"></el-table-column>
        <el-table-column prop="zy" align="center" label="包含资源" width="150"></el-table-column>
        <el-table-column align="center" label="状态" width="70">
          <template slot-scope="scope">
            <span v-if="scope.row.status==1">草稿</span>
            <span v-if="scope.row.status==2">有效</span>
            <span v-if="scope.row.status==3" style="color: 'red';">已过期</span>
            <span v-if="scope.row.status==4">拒绝</span>
          </template>
        </el-table-column>
        <el-table-column prop="money" align="center" label="套播费用（万元）" width="120"></el-table-column>
        <el-table-column prop="created_at" align="center" label="制作时间" width="120"></el-table-column>
        <el-table-column prop="use" align="center" label="适用范围" width="120"></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
        <el-button type="success" style="margin-left:10px;">数据输出</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { Product_list } from "../../api/Salesman.js";
import { SETDATE, getDoorList } from "../../api/System.js";
export default {
  data() {
    return {
      use: [],
      props: {
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "children"
      },
      tableData: [{ name: "xxx" }],
      options: [
        {
          value: "1",
          label: "草稿"
        },
        {
          value: "2",
          label: "有效"
        },
        {
          value: "3",
          label: "过期"
        },
        {
          value: "4",
          label: "拒绝"
        }
      ],
      value: "",
      currentPage3: 1,
      page: 1,
      total: 0,
      start_time: "",
      end_time: "",
      effective_start: "",
      effective_end: "",
      name: "",
      resources_name: "",
      status: "",
      doorlist: [],
      param: {
        per: 10,
        start_time: "",
        end_time: "",
        effective_start: "",
        effective_end: "",
        name: "",
        resources_name: "",
        status: ""
      }
    };
  },
  created() {
    this.getProduct_list();
    this.getdoor();
  },
  methods: {
    getdoor() {
      getDoorList().then(res => {
        if (res.code == 200) {
          console.log(res);
          this.doorlist = res.data;
        }
      });
    },
    seachList() {
      this.page = 1;
      var data = {
        per: 10,
        start_time: this.start_time / 1000,
        end_time: this.end_time / 1000,
        effective_start: this.effective_start / 1000,
        effective_end: this.effective_end / 1000,
        name: this.name,
        resources_name: this.resources_name,
        status: this.status,
        use:this.use.length>0?this.use[this.use.length-1]:''
      };
      this.param = data;
      this.getProduct_list();
    },
    getProduct_list() {
      this.param.page = this.page;
      Product_list(this.param).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.page = res.data.current_page;
          this.total = res.data.total;
          this.tableData = res.data.data;
          this.tableData.forEach(element => {
            element.effective_start = SETDATE(element.effective_start, true);
            element.created_at = SETDATE(element.created_at);
            element.effective_end = SETDATE(element.effective_end, true);
            var zy = [];
            element.get_product_type.forEach(el => {
              zy.push(el.resources_name);
            });
            element.zy = zy.slice(0, 2).join("+");
            element.use = element.use
              .split("+")
              .slice(0, 2)
              .join("+");
          });
        }
      });
    },
    toadd() {
      this.$router.push({
        path: "/add_scheme",
        query: {
          type: 1
        }
      });
    },
    handleSizeChange() {},
    handleCurrentChange(e) {
      this.page = e;
      this.getProduct_list();
    }
  }
};
</script>
<style lang="scss" scoped>
.linetop {
  width: 97%;
  margin: 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .topright {
    display: flex;
    width: 80px;
    justify-content: space-between;
  }
}
.seachsee {
  width: 97%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;

  .itemones {
    width: 50%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    .itemname {
      width: 100px;
      margin-left: 20px;
    }
  }
}
.ulist {
  width: 97%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 50px;
}
.block {
  display: flex;
  float: right;
}
</style>